<template>
  <div class="padding30px">
    <a-card title="查询列表">
    
      <!-- 表格 -->
      <a-table :dataSource="dataSourceT" :columns="columns" :pagination="pagination"
        rowKey="className" bordered @change="handleTableChange">
        <!-- 自定义列渲染 -->
        <template #bodyCell="{ column, record }">
          <!-- 操作列 -->
          <template v-if="column.dataIndex === 'edit'">
            <a-button @click="openEditModal(record)">编辑</a-button>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 新增/编辑模态框 -->
    <a-modal :title="isEditMode ? '编辑' : '新增'" :open="modalVisible" @ok="handleSubmit" @cancel="handleCancel">
      <a-form ref="formRef" :model="currentFormData" :rules="formRules" layout="vertical">

        <a-form-item label="方法名" name="methodName">
          <a-input v-model:value="currentFormData.methodName" />
        </a-form-item>
        <a-form-item label="方法参数" name="params">
          <a-input v-model:value="currentFormData.params" />
        </a-form-item>
        <a-form-item label="执行时长" name="exeuTime">
          <a-input v-model:value="currentFormData.exeuTime" />
        </a-form-item>
        <a-form-item label="创建时间" name="createTime">
          <a-input v-model:value="currentFormData.createTime" />
        </a-form-item>
        <a-form-item label="用户名" name="userName">
          <a-input v-model:value="currentFormData.userName" />
        </a-form-item>
        <a-form-item label="IP地址" name="ip">
          <a-input v-model:value="currentFormData.ip" />
        </a-form-item>
        <a-form-item label="请求路径" name="url">
          <a-input v-model:value="currentFormData.url" />
        </a-form-item>

      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { message } from 'ant-design-vue'
import {
  listApi,
  addApi,
  updateApi,
  updateBatchApi,
  deleteApi
} from '#/api/object/tLog.ts'


// 通用 CRUD 钩子
import { crud } from '#/components/crud'

// 图片上传组件（此处暂时未用到，保留未来扩展可能）
// import ImageUpload from '#/components/ImageUpload.vue'

// 初始化搜索表单
const initSearchForm = {
  roleName: '',
}

const pagination = {
  current: 1,
  pageSize: 10,
  total: 0,
}
// 使用 useCrud 管理数据和操作
const {
  dataSource: dataSourceT,
  searchForm,
  selectedRowKeys: rowSelectionSelecRow,
  modalVisible,
  isEditMode,
  formData: currentFormData,
  loadData,
  handleTableChange,
  handleSearch,
  resetSearch,
  deleteSelected: deleteSelect,
  openAddModal,
  openEditModal,
  handleSubmit,
  handleCancel,
} = crud({
  getList: listApi,
  create: addApi,
  update: updateApi,
  delete: deleteApi,
}, initSearchForm)

// 表单验证规则
const formRules = {
  methodName: [
    { required: true, message: '请输入方法名' }
  ],
  params: [
    { required: true, message: '请输入方法参数' }
  ],
  exeuTime: [
    { required: true, message: '请输入执行时长' }
  ],
  createTime: [
    { required: true, message: '请输入创建时间' }
  ],
  userName: [
    { required: true, message: '请输入用户名' }
  ],
  ip: [
    { required: true, message: '请输入IP地址' }
  ],
  url: [
    { required: true, message: '请输入请求路径' }
  ],
}

// 表格列配置
const columns = [
  { title: '类名', dataIndex: 'className', key: 'className', align: 'center' },
  { title: '方法名', dataIndex: 'methodName', key: 'methodName', align: 'center' },
  { title: '方法参数', dataIndex: 'params', key: 'params', align: 'center' },
  { title: '执行时长', dataIndex: 'exeuTime', key: 'exeuTime', align: 'center' },
  { title: '创建时间', dataIndex: 'createTime', key: 'createTime', align: 'center' },
  { title: '用户名', dataIndex: 'userName', key: 'userName', align: 'center' },
  { title: 'IP地址', dataIndex: 'ip', key: 'ip', align: 'center' },
  { title: '请求路径', dataIndex: 'url', key: 'url', align: 'center' },
  // { title: '操作', dataIndex: 'edit', key: 'edit', align: 'center' },
]

// 行选择配置
const rowSelection = {
  onChange: (selectedRowKeys) => {
    rowSelectionSelecRow.value = selectedRowKeys
  }
}

// 页面挂载时加载数据
onMounted(() => {
  loadData()
})


</script>
